// 管理页模板
<template>

<div class="manage" :class='toolsModel'>
    
    <div class="tools-bar">
        <l-tools-bar  
        :toolsContainerComponent='toolsContainerComponent' 
        :mode='toolsModel' 
        :toolsFunConf='toolsFunConf' 
        :toolsModel='toolsModel'></l-tools-bar>        
    </div>

    <div class="orders">

        <!-- loading -->
        <c-loading v-if='loading'></c-loading>

        <!-- content -->
        <l-table-container 
        v-show='!loading'
        @select="tableSelect"
        :tableTitle='tabeTitleConf' 
        :tableData='tableOrders'></l-table-container>

    </div>


    <transition name="right-to-left">
    <div class="info-form" :style='formStyle' v-show='foldingLayerState'>
        <l-form-container :componentConf='componentStore' :controlBtns='controlBtns'></l-form-container>
    </div>
    </transition>
    
    
</div>

</template>

<script lang='ts'>
import {Component, Vue} from 'vue-property-decorator'
import {mapState, mapMutations, mapGetters, mapActions} from 'vuex'

const toolsBar  = () => import('@/components/ivew_components/table_tools_bar/index.vue');
const tableContainer = () => import('@/components/ivew_components/table_container/index.vue');
const formContainer = () => import('@/components/ivew_components/form_container/index.vue');

@Component({
    components: {
        'l-tools-bar': toolsBar,
        'l-table-container': tableContainer,
        'l-form-container': formContainer,
    },
})
export default class manageTemplate extends Vue{
    
    name:string = 'scarManage'

    foldingLayerState:boolean
    loading:boolean
    tableOrders:carTableOrder[]
    tabeTitleConf:tableInf.tableTitle[]
    toolsFunConf: commonInf.toolsBarItem[]
    componentStore:any
    controlBtns:commonInf.toolsBarItem[]
    tableSelect:any

    formStyle = {
        maxWidth: `${1200/14}rem`
    }

}

</script>

<style scoped lang='scss'>
.manage{
    position: relative;
    
    display: grid;
    grid-template-columns: _rem(190px) auto;
    grid-template-rows: 1fr;
    grid-column-gap: _rem(10px);

    height: 100%;
}

.tools-bar{
    overflow-y: auto;
    overflow-x: hidden;
    
    grid-row: 1/2;
    grid-column: 1/2;
}

.orders{
    position: relative;
    grid-row: 1/2;
    grid-column: auto;
}


// 收缩模式
.manage.close{
     grid-template-columns: _rem(68px) auto;
}


.info-form{
    overflow: hidden;
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;

    margin: auto;
    width: 100%;
    background: $default_bg;
    box-shadow: $default_shadow;
    font-size: $font_small;
    z-index: 10;
}

</style>